import { useRequest } from 'ahooks'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

import { ModuleTitle } from '../../../BigScreenBase/ModuleTitle'
import {
  AssociationData,
  SwitchAndIntervalRef
} from '../../../BigScreenBase/interface'
import { getWarnClass, getWorkOrderClass } from '../../data'
import ItemRender, { ItemRenderRef } from './ItemRender'

interface CenterToDayWarnProps {
  selectedAssociationItem: AssociationData
}

const keyMap: Readonly<['entSum', 'carSum', 'personSum']> = [
  'entSum',
  'carSum',
  'personSum'
]

const CenterToDayWarn = forwardRef<SwitchAndIntervalRef, CenterToDayWarnProps>(
  (props, ref) => {
    const { key: entId } = props.selectedAssociationItem

    const itemRenderRef = useRef<ItemRenderRef[]>([])

    const handleCollectRef = (ref: ItemRenderRef, index: number) => {
      itemRenderRef.current[index] = ref
    }

    const { data: warnClass, runAsync: getWarnInfo } = useRequest(
      async (id?: string) => {
        const data = await getWarnClass({ entId: id || entId })
        return data
      },
      {
        manual: true
      }
    )

    const { data: workOrderClass, run: getWorkOrder } = useRequest(
      async (id?: string) => {
        const data = await getWorkOrderClass({ entId: id || entId })
        return data
      },
      {
        manual: true
      }
    )

    useEffect(() => {
      getWarnInfo().then((res) => {
        itemRenderRef.current.forEach((item, index) =>
          item.initialData('inital', res[keyMap[index]])
        )
      })
      getWorkOrder()
    }, [])

    useImperativeHandle(ref, () => {
      return {
        resize: () => {
          itemRenderRef.current.forEach((item) => item.resize())
        },
        switchAssociation: (key) => {
          getWarnInfo(key).then((res) => {
            itemRenderRef.current.forEach((item, index) =>
              item.initialData('switchAssociation', res[keyMap[index]])
            )
          })
          getWorkOrder(key)
        },
        intervalRefresh: () => {
          itemRenderRef.current.forEach((item) => item.clearCountUp())
          getWarnInfo().then((res) => {
            itemRenderRef.current.forEach((item, index) =>
              item.intervalRefresh(res[keyMap[index]])
            )
          })
          getWorkOrder()
        }
      }
    })

    return (
      <div className="bigscreen-module ms-module" style={{ height: '257px' }}>
        <ModuleTitle title={'今日风险'}></ModuleTitle>
        <div
          style={{
            padding: '16px 0 24px',
            display: 'flex',
            height: 'calc(100% - 42px)'
          }}
        >
          <ItemRender
            ref={(ref) => handleCollectRef(ref!, 0)}
            label="高风险企业"
            rankList={warnClass?.entKvs}
            data={workOrderClass?.entKvs}
          />
          <ItemRender
            ref={(ref) => handleCollectRef(ref!, 1)}
            label="高风险车辆"
            rankList={warnClass?.carKvs}
            style={{
              borderLeft: '1px solid transparent'
            }}
            data={workOrderClass?.carKvs}
          />
          <ItemRender
            ref={(ref) => handleCollectRef(ref!, 2)}
            label="高风险人员"
            rankList={warnClass?.personKvs}
            style={{
              borderLeft: '1px solid transparent'
            }}
            data={workOrderClass?.personKvs}
          />
        </div>
      </div>
    )
  }
)

export default CenterToDayWarn
